<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>服务</title>
	<link rel="icon" href="images/l_logo.png"  />
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="styles/default.css">
	<link rel="stylesheet" href="styles/main.css">
	<link rel="stylesheet" href="styles/service.css">
	<link rel="stylesheet" href="fonts/iconfont.css">
	<script src="scripts/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="scripts/service.js" type="text/javascript" charset="utf-8"></script>
	<script src="scripts/jquery.particleground.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="header-hide"></div>

	<div id="header-container">
		<div id="nav-bar">
			<div class="l-nav">
				<div class="l-nav-img"><img src="images/logo.png" alt="logo" style="vertical-align: top;"></div>
			</div>
			<div class="r-nav"></div>
		</div>
	</div>

	<div id="service-carousel-container">
		<div id="service-carousel-bar">
			<div id="service-carousel-content">
				<h1>凡路科技项目研发</h1>
				<p>凡路科技拥有较为完善的项目开发体系且拥有可靠的解决方案以满足项目需求</p>
				<div class="car-content-footer">
					<button class="left-info-btn">联系我们</button>
				</div>
			</div>
		</div>
		<div id="wrap-container">
			<div id="wrap-bar">
				<ul class="wrap-list">
					<li class="wrap-list-item" data-wrap="#whychoose-container">
						<p>我们的优势</p>
					</li>
					<li class="wrap-list-item" data-wrap="#process-container">
						<p>团队成员成长</p>
					</li>
					<li class="wrap-list-item" data-wrap="#customer-container">
						<p>项目案例</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div id="whychoose-container">
		<div id="whychoose-bar">
			<div class="whychoose-header">
				<span class="line"></span>
				<h2>我们的优势</h2>
			</div>
			<div class="whychoose-body">
				<ul class="whychoose-ul">
					<li class="whychoose-li">
						<div class="name">
							<h3 class="text">完善的学习体系</h3>
							<i class="icon iconfont icon-liuchengwaibao"></i>
						</div>
						<div class="inner">
							<p>多个学习方向，成熟的培养方案</p>
							<div class="pointul">
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>方向多</span></h4>
								    6大技术部门，众多学习方向</div>
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>方案全</span></h4>
                                    针对每个学习路线，都有成熟的培养方案</div>
							</div>
						</div>
					</li>
					<li class="whychoose-li">
						<div class="name">
							<h3 class="text">优秀的团队成员</h3>
							<i class="icon iconfont icon-tuandui"></i>
						</div>
						<div class="inner">
							<p>选拔合理，高效管理，学习氛围浓厚</p>
							<div class="pointul">
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>高组织</span></h4>
								    部门纪律严格，学习和开发严谨</div>
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>高目标</span></h4>
                                    致力于培养校园编程精英</div>
							</div>
						</div>
					</li>
					<li class="whychoose-li">
						<div class="name">
							<h3 class="text">丰富的项目成果</h3>
							<i class="icon iconfont icon-weihu"></i>
						</div>
						<div class="inner">
							<p>优秀的项目创意，一流的开发水平</p>
							<div class="pointul">
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>真项目</span></h4>
								    优秀的创意，多部门合作开发</div>
								<div class="pointli">
								<h4><span class="icon iconfont icon-duigou"></span><span>高质量</span></h4>
                                    项目追求高质量，在众多比赛中脱颖而出</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div id="process-container">
		<div id="process-bar">
			<div class="process-header">
				<span class="line"></span>
				<h2>团队成员成长</h2>
			</div>
			<div class="process-body">
				<img src="images/process.png" alt="">
			</div>
		</div>
	</div>
	<div id="customer-container">
		<div id="customer-bar" style="z-index: 111;">
			<div class="customer-header">
				<span class="line"></span>
				<h2 style="color: #fff">项目案例</h2>
			</div>
			<div class="project-body">
				<ul class="project-body-list">
				</ul>
			</div>
		</div>
		<canvas id="canvas" class="bg" width="1950px" height="1086px"></canvas>
		<canvas id="canvasbg" class="bg" width="1950px" height="1086px"></canvas>
		<script type="text/javascript" src="scripts/polygonizr.min.js"></script>
	</div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						项目
					</h4>
				</div>
				<div id="myCarousel" class="carousel slide">
					<div class="carousel-inner" id="carousel-inner">

					</div>
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<div class="modal-body" id="modelbody">
					项目内容
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div id="footer-filter-container">
		<div id="footer-filter-bar">
			<div class="footer-filter-header">
				<ul class="footer-filter-header-list">
					<li class="fofilter-header-list-item"><i class="icon iconfont icon-chuangxin"></i>创新</li>
					<li class="fofilter-header-list-item"><i class="icon iconfont icon-guifan"></i>规范</li>
					<li class="fofilter-header-list-item"><i class="icon iconfont icon-wenhuachuancheng"></i>传承</li>
					<li class="fofilter-header-list-item"><i class="icon iconfont icon-fuwu"></i>感恩</li>
				</ul>
			</div>
		</div>
	</div>

	<div id="footer-container">
		<div id="footer-bar">
		</div>
	</div>
	<script type="text/javascript" src="./scripts/common.js"></script>
</body>
<script src="scripts/index-project.js"></script>
<script>
    // min and max radius, radius threshold and percentage of filled circles
    var radMin = 5,
        radMax = 125,
        filledCircle = 60, //percentage of filled circles
        concentricCircle = 30, //percentage of concentric circles
        radThreshold = 25; //IFF special, over this radius concentric, otherwise filled

    //min and max speed to move
    var speedMin = 0.3,
        speedMax = 2.5;

    //max reachable opacity for every circle and blur effect
    var maxOpacity = 0.6;

    //default palette choice
    var colors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
        bgColors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
        circleBorder = 10,
        backgroundLine = bgColors[0];
    var backgroundMlt = 0.85;

    //min distance for links
    var linkDist = Math.min(canvas.width, canvas.height) / 2.4,
        lineBorder = 2.5;

    //most importantly: number of overall circles and arrays containing them
    var maxCircles = 12,
        points = [],
        pointsBack = [];

    //populating the screen
    for (var i = 0; i < maxCircles * 2; i++) points.push(new Circle());
    for (var i = 0; i < maxCircles; i++) pointsBack.push(new Circle(true));

    //experimental vars
    var circleExp = 1,
        circleExpMax = 1.003,
        circleExpMin = 0.997,
        circleExpSp = 0.00004,
        circlePulse = false;

    //circle class
    function Circle(background) {
        //if background, it has different rules
        this.background = (background || false);
        this.x = randRange(-canvas.width / 2, canvas.width / 2);
        this.y = randRange(-canvas.height / 2, canvas.height / 2);
        this.radius = background ? hyperRange(radMin, radMax) * backgroundMlt : hyperRange(radMin, radMax);
        this.filled = this.radius < radThreshold ? (randint(0, 100) > filledCircle ? false : 'full') : (randint(0, 100) > concentricCircle ? false : 'concentric');
        this.color = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
        this.borderColor = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
        this.opacity = 0.05;
        this.speed = (background ? randRange(speedMin, speedMax) / backgroundMlt : randRange(speedMin, speedMax)); // * (radMin / this.radius);
        this.speedAngle = Math.random() * 2 * Math.PI;
        this.speedx = Math.cos(this.speedAngle) * this.speed;
        this.speedy = Math.sin(this.speedAngle) * this.speed;
        var spacex = Math.abs((this.x - (this.speedx < 0 ? -1 : 1) * (canvas.width / 2 + this.radius)) / this.speedx),
            spacey = Math.abs((this.y - (this.speedy < 0 ? -1 : 1) * (canvas.height / 2 + this.radius)) / this.speedy);
        this.ttl = Math.min(spacex, spacey);
    };

    Circle.prototype.init = function() {
        Circle.call(this, this.background);
    }

    //support functions
    //generate random int a<=x<=b
    function randint(a, b) {
        return Math.floor(Math.random() * (b - a + 1) + a);
    }
    //generate random float
    function randRange(a, b) {
        return Math.random() * (b - a) + a;
    }
    //generate random float more likely to be close to a
    function hyperRange(a, b) {
        return Math.random() * Math.random() * Math.random() * (b - a) + a;
    }

    //rendering function
    function drawCircle(ctx, circle) {
        //circle.radius *= circleExp;
        var radius = circle.background ? circle.radius *= circleExp : circle.radius /= circleExp;
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, radius * circleExp, 0, 2 * Math.PI, false);
        ctx.lineWidth = Math.max(1, circleBorder * (radMin - circle.radius) / (radMin - radMax));
        ctx.strokeStyle = ['rgba(', circle.borderColor, ',', circle.opacity, ')'].join('');
        if (circle.filled == 'full') {
            ctx.fillStyle = ['rgba(', circle.borderColor, ',', circle.background ? circle.opacity * 0.8 : circle.opacity, ')'].join('');
            ctx.fill();
            ctx.lineWidth=0;
            ctx.strokeStyle = ['rgba(', circle.borderColor, ',', 0, ')'].join('');
        }
        ctx.stroke();
        if (circle.filled == 'concentric') {
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, radius / 2, 0, 2 * Math.PI, false);
            ctx.lineWidth = Math.max(1, circleBorder * (radMin - circle.radius) / (radMin - radMax));
            ctx.strokeStyle = ['rgba(', circle.color, ',', circle.opacity, ')'].join('');
            ctx.stroke();
        }
        circle.x += circle.speedx;
        circle.y += circle.speedy;
        if (circle.opacity < (circle.background ? maxOpacity : 1)) circle.opacity += 0.01;
        circle.ttl--;
    }

    //initializing function
    function init() {
        window.requestAnimationFrame(draw);
    }

    //rendering function
    function draw() {

        if (circlePulse) {
            if (circleExp < circleExpMin || circleExp > circleExpMax) circleExpSp *= -1;
            circleExp += circleExpSp;
        }
        var ctxfr = document.getElementById('canvas').getContext('2d');
        var ctxbg = document.getElementById('canvasbg').getContext('2d');

        ctxfr.globalCompositeOperation = 'destination-over';
        ctxfr.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
        ctxbg.globalCompositeOperation = 'destination-over';
        ctxbg.clearRect(0, 0, canvas.width, canvas.height); // clear canvas

        ctxfr.save();
        ctxfr.translate(canvas.width / 2, canvas.height / 2);
        ctxbg.save();
        ctxbg.translate(canvas.width / 2, canvas.height / 2);

        //function to render each single circle, its connections and to manage its out of boundaries replacement
        function renderPoints(ctx, arr) {
            for (var i = 0; i < arr.length; i++) {
                var circle = arr[i];
                //checking if out of boundaries
                if (circle.ttl<0) {}
                var xEscape = canvas.width / 2 + circle.radius,
                    yEscape = canvas.height / 2 + circle.radius;
                if (circle.ttl < -20) arr[i].init(arr[i].background);
                //if (Math.abs(circle.y) > yEscape || Math.abs(circle.x) > xEscape) arr[i].init(arr[i].background);
                drawCircle(ctx, circle);
            }
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = i + 1; j < arr.length; j++) {
                    var deltax = arr[i].x - arr[j].x;
                    var deltay = arr[i].y - arr[j].y;
                    var dist = Math.pow(Math.pow(deltax, 2) + Math.pow(deltay, 2), 0.5);
                    //if the circles are overlapping, no laser connecting them
                    if (dist <= arr[i].radius + arr[j].radius) continue;
                    //otherwise we connect them only if the dist is < linkDist
                    if (dist < linkDist) {
                        var xi = (arr[i].x < arr[j].x ? 1 : -1) * Math.abs(arr[i].radius * deltax / dist);
                        var yi = (arr[i].y < arr[j].y ? 1 : -1) * Math.abs(arr[i].radius * deltay / dist);
                        var xj = (arr[i].x < arr[j].x ? -1 : 1) * Math.abs(arr[j].radius * deltax / dist);
                        var yj = (arr[i].y < arr[j].y ? -1 : 1) * Math.abs(arr[j].radius * deltay / dist);
                        ctx.beginPath();
                        ctx.moveTo(arr[i].x + xi, arr[i].y + yi);
                        ctx.lineTo(arr[j].x + xj, arr[j].y + yj);
                        var samecolor = arr[i].color == arr[j].color;
                        ctx.strokeStyle = ["rgba(", arr[i].borderColor, ",", Math.min(arr[i].opacity, arr[j].opacity) * ((linkDist - dist) / linkDist), ")"].join("");
                        ctx.lineWidth = (arr[i].background ? lineBorder * backgroundMlt : lineBorder) * ((linkDist - dist) / linkDist); //*((linkDist-dist)/linkDist);
                        ctx.stroke();
                    }
                }
            }
        }

        var startTime = Date.now();
        renderPoints(ctxfr, points);
        renderPoints(ctxbg, pointsBack);
        deltaT = Date.now() - startTime;

        ctxfr.restore();
        ctxbg.restore();

        window.requestAnimationFrame(draw);
    }

    init();
</script>
</html>
